<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '地图导航组件',
  },
}
</route>

<template>
  <view class="route-map-container">
    <!-- 顶部输入框区域 -->
    <view class="search-bar">
      <view class="search-item">
        <text class="dot my-location"></text>
        <text class="search-label">{{ startLabel }}</text>
      </view>
      <view class="search-item">
        <text class="dot destination"></text>
        <text class="search-label">{{ endLabel }}</text>
      </view>
      <view class="search-icons">
        <wd-icon name="plus" class="search-icon" />
        <wd-icon name="list" class="search-icon" />
      </view>
    </view>

    <!-- 交通方式选择标签页 -->
    <view class="transport-tabs">
      <wd-tabs v-model="activeTab" :line-width="40" :line-height="6" :active-color="'#1ec742'">
        <wd-tab title="打车" />
        <wd-tab title="驾车" />
        <wd-tab title="公交地铁" />
        <wd-tab title="步行" />
        <wd-tab title="骑行" />
      </wd-tabs>
    </view>

    <!-- 地图区域 -->
    <view class="map-container">
      <map id="myMap" style="width: 100%; height: 100%"></map>
      <view class="map-controls">
        <wd-icon name="refresh" class="map-control-icon" />
        <wd-icon name="location" class="map-control-icon" />
      </view>
    </view>

    <!-- 到达时间气泡 -->
    <view class="arrive-bubble">
      <view class="arrive-label">{{ arriveTimeLabel }}</view>
    </view>

    <!-- 底部路线方案和导航按钮区域 -->
    <view class="footer-panel">
      <view class="route-options">
        <slot name="route-options" />
      </view>
      <view class="start-button-container">
        <wd-button type="success" block round class="start-nav-btn" @click="handleStartNav">
          开始导航
        </wd-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits } from 'vue'
const props = defineProps({
  startLabel: { type: String, default: '我的位置' },
  endLabel: { type: String, default: '尚城国际停车场' },
  arriveTimeLabel: { type: String, default: '11:56 到达' },
  activeTabIndex: { type: Number, default: 1 },
})
const emit = defineEmits(['start-nav'])
const activeTab = ref(props.activeTabIndex)
function handleStartNav() {
  emit('start-nav')
}
</script>

<style lang="scss" scoped>
.route-map-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f7fa;
}
.search-bar {
  display: flex;
  align-items: center;
  padding: 18rpx 20rpx;
  margin: 20rpx 20rpx 0 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(33, 150, 243, 0.06);
}
.search-item {
  display: flex;
  align-items: center;
  margin-right: 24rpx;
}
.dot {
  width: 12rpx;
  height: 12rpx;
  margin-right: 8rpx;
  border-radius: 50%;
}
.my-location {
  background-color: #1ec742;
}
.destination {
  background-color: #ff4d4f;
}
.search-label {
  font-size: 28rpx;
  color: #222;
}
.search-icons {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.search-icon {
  margin-left: 18rpx;
  font-size: 36rpx;
  color: #888;
}
.transport-tabs {
  padding: 0 0 8rpx 0;
  margin: 16rpx 0 0 0;
  background: #fff;
}
.map-container {
  position: relative;
  flex: 1;
  min-height: 320rpx;
  overflow: hidden;
  background: #e5eaf3;
  border-radius: 0 0 24rpx 24rpx;
}
.map-controls {
  position: absolute;
  right: 24rpx;
  bottom: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}
.map-control-icon {
  padding: 12rpx;
  font-size: 44rpx;
  color: #222;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2rpx 8rpx rgba(33, 150, 243, 0.1);
}
.arrive-bubble {
  position: absolute;
  top: 220rpx;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
}
.arrive-label {
  padding: 8rpx 24rpx;
  font-size: 24rpx;
  color: #fff;
  background: #1ec742;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(33, 150, 243, 0.1);
}
.footer-panel {
  padding: 24rpx 0 0 0;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  box-shadow: 0 -2rpx 8rpx rgba(33, 150, 243, 0.06);
}
.route-options {
  display: flex;
  justify-content: space-around;
  padding: 0 18rpx;
  margin-bottom: 18rpx;
}
.start-button-container {
  padding: 0 32rpx 24rpx 32rpx;
}
.start-nav-btn {
  height: 88rpx;
  font-size: 32rpx;
  line-height: 88rpx;
  color: #fff;
  background: #1ec742;
}
</style>
